<template>
  <div class="MyDay">
    <div class="MyBox-b">
      <el-button type="text" class="MyBoxBtn" @click="dialogVisible = true"
        >添加假期</el-button
      >

      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div class="AddDay">
          <div class="AddDayHeader">
            <img class="AddDayHeaderImg" src="" alt="" />
            <i class="title">添加假期</i>
          </div>
          <div class="AddDayMid">
            <div class="AddDayMid-a">
              <span class="AddDayMid-a-biao">开始日期:</span>
              <input type="text" class="AddDayMid-a-inp" />
            </div>
            <div class="AddDayMid-a">
              <span class="AddDayMid-a-biao">结束日期:</span>
              <input type="text" class="AddDayMid-a-inp" />
              <p class="AddDayMid-a-inp-t">*结束日期当天也属于假期范围</p>
            </div>
            <div class="AddDayMid-a">
              <span class="AddDayMid-a-biao">时间:</span>
              <div class="InputBox-b">
                <div class="InputBtn">
                  <input
                    class="InputShu"
                    type="checkbox"
                    name="checkbox1"
                    value="全天"
                  />全天
                  <input
                    class="InputShu"
                    type="checkbox"
                    name="checkbox2"
                    value="上午"
                  />上午
                  <input
                    class="InputShu"
                    type="checkbox"
                    name="checkbox3"
                    value="中午"
                  />中午
                  <input
                    class="InputShu"
                    type="checkbox"
                    name="checkbox4"
                    value="下午"
                  />下午
                </div>
              </div>
            </div>
            <div class="AddDayMid-a">
              <span class="AddDayMid-a-biao">备注:</span>
              <div class="AddDayMidText">
                <textarea class="textRemarks" id="" cols="20" rows="3">
                </textarea>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">返 回</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >提 交</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="MyBox">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="address" label="备注"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" >修改</el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          caozuo: "刷Inca",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          caozuo: "刷Inca",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          caozuo: "刷Inca",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          caozuo: "刷Inca",
        },
      ],
    };
  },
  methods: {
    deleteRow(index, rows) {
        rows.splice(index, 1);
      }
  },
};
</script>

<style scoped lang="less">
.MyDay {
  width: 100%;
}
.MyBox {
  width: 90%;
  border: 1px solid #333;
}
.MyBoxBtn {
  margin-top: 20px;
  margin-left: 1200px;
  margin-bottom: 10px;
  font-size: 16px;
  color: red;
}
.AddDay {
  width: 100%;
}
.AddDayHeader {
  position: relative;
}
.AddDayHeaderImg {
  margin-left: 10px;
  margin-top: 20px;
  width: 100px;
  height: 60px;
  background-color: aquamarine;
}
.title {
  position: absolute;
  top: 30px;
  left: 160px;
  font-size: 25px;
}
.AddDayMid-a {
  font-size: 16px;
  margin-left: 50px;
  margin-top: 20px;
}
.AddDayMid-a-inp {
  margin-left: 20px;
}
.AddDayMid-a-inp-t {
  margin-left: 70px;
}
.InputBtn {
  margin-left: 50px;
  margin-top: -20px;
}
.AddDayMidText {
  margin-left: 70px;
  margin-top: -20px;
}
</style>